<template>
	<view class="l_pages">
		<jnavbar :title="'签到'" :PageId="26"></jnavbar>
		<scroll-view scroll-y="true" class="page_container">
			<vimage v-if='detial.style.bg_img' class="img_boxs" mode="widthFix" :src="detial.style.bg_img"></vimage>
			<vimage v-else imgtype="1" class="img_boxs" mode="widthFix" src="static/images/signin.png"></vimage>
			
			<view class="mypages">
				<view class="time_div">
					<text>已坚持</text>
					<view class="day_num" :style="'color:' + detial.style.day_color">
						<view>
							<text>{{ days.a }}</text>
						</view>
						<view>
							<text>{{ days.b }}</text>
						</view>
						<view>
							<text>{{ days.c }}</text>
						</view>
					</view>
					<text>天签到</text>
				</view>
				<text class="tips" :style="'color:' + detial.style.tip_color">{{ today ? '今天已签到' : '今天未签到' }}</text>
				<view class="remind" v-if="detial.is_remind">
					<text :style="'color:' + detial.style.tip_color">签到提醒</text>
					<u-switch size="26" @change="switchchange" v-model="is_remind" inactive-color="#FF8900"></u-switch>
				</view>
				<view class="rule">
					<vimage class="image" imgtype="1" src="static/images/gold.png" mode=""></vimage>
					<text>{{ sign_data.continuity | getnext(continuity, detial.value) }}{{ detial.type == 1 ? integral_text : balance_text }}</text>
				</view>
				<view class="calendar">
					<view class="title_div">
						<text class="title">签到记录({{ nowMonth + 1 }}月)</text>
						<text class="mouth"></text>
					</view>
					<u-read-more close-text=" " open-text=" " color="#C2CBD3" show-height="300" :shadow-style="shadowStyle" :toggle="true" text-indent="0">
						<ss-calendar :checks="checks" @current-month-day="onSignIn" @prev-month-day="onPrev" @next-month-day="onNext" />
					</u-read-more>
					<view class="line">
						<view class="line_item"></view>
						<view class="line_item"></view>
					</view>
					<view class="list">
						<view class="item" v-for="(item, i) in continuity">
							<vimage class="image" imgtype="1" src="static/images/gold.png" mode=""></vimage>
							<text class="info">连续签到{{ item.day }}天 赠送{{ item.value }}{{ item.type == 1 ? integral_text : balance_text }}</text>
							<text class="signbtn" v-if="item.day - sign_data.continuity > 0" :style="'background:' + detial.style.res_bg + ';color:' + detial.style.res_color">
								未领取
							</text>
							<text class="signbtn" v-else style="background:#EBEBEB; color:#999999">已领取</text>
						</view>
						<view class="item" v-for="(item, i) in cumulative">
							<vimage class="image" imgtype="1" src="static/images/gold.png" mode=""></vimage>
							<text class="info">累计签到{{ item.day }}天 赠送{{ item.value }}{{ item.type == 1 ? integral_text : balance_text }}</text>
							<text class="signbtn" v-if="item.day - sign_data.count > 0" :style="'background:' + detial.style.res_bg + ';color:' + detial.style.res_color">
								未领取
							</text>
							<text class="signbtn" v-else style="background:#EBEBEB; color:#999999">已领取</text>
						</view>
					</view>
				</view>
				<view class="btns" v-if="!today" @click="signing" :style="'background:' + detial.style.btn_bg + ';color:' + detial.style.btn_color"><text>立即签到</text></view>
				<view class="rule_btn" @click="show = true">
					<text>查看规则</text>
					<text class="el-sc-xiangyou"></text>
				</view>
			</view>
		</scroll-view>
		<u-popup v-model="show" mode="center" :closeable="true">
			<view class="rule_info">
				<vimage class="image" mode="widthFix" imgtype="1" src="static/images/rule_bg.png"></vimage>
				<view class="content">
					<text class="title">活动规则</text>
					<scroll-view class="details" scroll-y="true">
						<view><u-parse :tag-style="style" :domain="baseUrl" :html="detial.info" :show-with-animation="true"></u-parse></view>
					</scroll-view>
				</view>
				<view v-if="!today" class="rule_sign_btn" @click="signing"><text>立即去签到</text></view>
			</view>
		</u-popup>
		<tab-bar ref="tabbar" :PageId="26"></tab-bar>
		<uni-login></uni-login>
	</view>
</template>

<script>
import base from '@/common/baseUrl.js';
import ssCalendar from './components/ss-calendar.vue';


import {mapState, mapMutations} from 'vuex';
import util from '@/common/util.js'
export default {
	data() {
		return {
			checks: ['2021-4-01', '2021-4-06', '2021-4-02', '2021-4-03', '2021-4-08'],
			shadowStyle: {
				backgroundImage: 'none',
				padding: '0',
				marginTop: '0'
			},
			show: false,
			detial: {
				style: {},
				value: 0
			},
			today: false,
			days: {
				a: '0',
				b: '0',
				c: '0'
			},
			sign_data: {},
			continuity: [],
			cumulative: [],
			is_remind: false,
			integral_text: '积分',
			balance_text: '余额',
			nowMonth: 0,
			style: {
				// 字符串的形式
				p: 'word-wrap : break-word'
			}
		};
	},
	components: {
		ssCalendar
	},
	computed: {

		baseUrl(){
			return util.geturl(base.baseUrl)
		},
		...mapState({
			oss: state => state.oss
		})
	},
	created() {
		this.getjuris('integralBalance').then(a => {
			if (a.integral_text) {
				this.integral_text = a.integral_text;
			}
			if (a.balance_text) {
				this.balance_text = a.balance_text;
			}
		});
		this.is_remind = uni.getStorageSync('is_remind')||false;
		this.getsign();
		var _this = this;
		this.$nextTick(a => {
			_this.$refs.tabbar.gettabs();
		});
		_this.judgeLogin(
			() => {},
			() => {
				_this.signlist();
			}
		);
	},
	filters: {
		getnext(a, list, value) {
			let b = list.filter(e => {
				return a < e.day;
			});
			if (b.length > 0) {
				let c = b[0];
				return '连续签到' + c.day + '天,赠送' + c.value;
			} else {
				return '每次签到，赠送' + value;
			}
		}
	},
	methods: {
		switchchange(value) {
			uni.setStorageSync('is_remind', value);
		},
		getsign() {
			this.$http('/signin/config', {}, 'GET').then(res => {
				if (res.statusCode) {
					
					if(!res.data.msg.style){
						uni.showModal({
							title:'提示',
							content:'活动未开启！',
							success() {
								uni.navigateBack()
							}
							
						})
						return false
					}
					this.detial = res.data.msg;
					this.continuity = res.data.msg.continuity.sort((a, b) => {
						return a.day - b.day;
					});
					this.cumulative = res.data.msg.cumulative.sort((a, b) => {
						return a.day - b.day;
					});
				}
			});
		},
		signlist() {
			var now = new Date(); //当前日期
			var nowMonth = now.getMonth(); //当前月
			this.nowMonth = nowMonth;

			var nowYear = now.getFullYear(); //当前年
			//本月的开始时间
			var monthStartDate = new Date(nowYear, nowMonth, 1);
			//本月的结束时间
			var monthEndDate = new Date(nowYear, nowMonth + 1, 0);
			var timeStar = Date.parse(monthStartDate) / 1000; //s
			var timeEnd = Date.parse(monthEndDate) / 1000; //s
			this.$http(
				'/signin/list',
				{
					start_time: this.$u.timeFormat(timeStar, 'yyyy-mm-dd'),
					end_time: this.$u.timeFormat(timeEnd, 'yyyy-mm-dd')
				},
				'POST'
			).then(res => {
				this.sign_data = res.data.msg;

				this.days = this.getnum(res.data.msg.count);
				this.getcheck(res.data.msg.list);
			});
		},
		getnum(a) {
			let b = Math.floor(a / 100);
			let c = a % 100;
			let d = Math.floor(c / 100);
			let e = c % 10;
			return {
				a: b,
				b: d,
				c: e
			};
		},
		signing() {
			this.$http('/signin', {}, 'GET').then(res => {
				this.signlist();
				uni.showToast({
					title: '签到成功！',
					icon: 'none'
				});
				this.show = false;
			});
		},
		getcheck(list) {
			let checks = [];
			var now = new Date();

			list.forEach(a => {
				let time = new Date(a.create_time);
				if (now - time < 86400000) {
					this.today = true;
				}
				checks.push(a.create_time.substr(0, 10));
			});
			this.checks = checks;
		}
	}
};
</script>

<style lang="scss" scoped>
.img_boxs {
	width: 100%;
	position: absolute;
	top: 0;
	z-index: 1;
}

.mypages {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;

	.time_div {
		display: flex;
		align-items: center;
		font-size: 36rpx;
		font-weight: 500;
		color: #ffffff;
		margin-top: 52rpx;

		.day_num {
			margin: 0 20rpx;
			display: flex;

			view {
				width: 90rpx;
				height: 120rpx;
				background: #fff;
				border-radius: 12rpx 12rpx;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 8rpx;

				&::after {
					position: absolute;
					top: 0;
					left: 0;
					content: '';
					display: block;
					width: 90rpx;
					height: 60rpx;
					background: #faf5f2;
					background-image: linear-gradient(0deg, #e6e2e1, #ffffff);
					border-radius: 12rpx 12rpx 0px 0px;
				}

				text {
					font-size: 79rpx;

					font-weight: 500;
					color: #ffab00;
					position: relative;
					z-index: 2;
				}
			}
		}
	}

	.tips {
		margin-top: 30rpx;
		font-size: 24rpx;
		font-weight: bold;
		color: #ca5f00;
		opacity: 0.7;
	}

	.remind {
		display: flex;
		align-items: center;
		margin-top: 22rpx;

		text {
			font-size: 24rpx;
			font-weight: bold;
			color: #ca5f00;
			opacity: 0.7;
			margin-right: 10rpx;
		}
	}

	.rule {
		width: 487rpx;
		height: 80rpx;
		background: linear-gradient(90deg, #ff8900, #ff8900);
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #ffffff;
		font-weight: 500;
		margin-top: 20rpx;

		.image {
			width: 39rpx;
			height: 39rpx;
			// box-shadow: 0px 1px 4px 0px rgba(175, 54, 0, 0.4);
			margin-left: 52rpx;
			margin-right: 26rpx;
		}
	}

	.calendar {
		margin-top: 60rpx;
		width: 700rpx;
		// height: 541rpx;
		background: #ffffff;
		box-shadow: 0px 6rpx 30rpx 0px rgba(255, 156, 0, 0.1);
		border-radius: 20px;
		display: flex;
		flex-direction: column;
		align-items: center;

		.title_div {
			.title {
				font-size: 36rpx;
				font-weight: bold;
				color: #323332;
			}

			margin-top: 40rpx;

			.mouth {
				font-size: 26rpx;
				font-weight: bold;
				color: #000000;
				opacity: 0.2;
				text-shadow: 0px 1rpx 2rpx rgba(255, 84, 0, 0.2);
			}
		}

		.line {
			width: 660rpx;
			display: flex;
			justify-content: space-between;
			position: relative;
			top: -14rpx;
			background: transparent;

			.line_item {
				width: 300rpx;
				height: 1rpx;
				background: #c2cbd3;
			}
		}

		.list {
			padding: 0 20rpx;
			width: 100%;

			.item {
				height: 144rpx;
				display: flex;
				align-items: center;
				position: relative;
				border-bottom: 1px dashed #ffc000;

				&:last-child {
					border-bottom: none;
				}

				.image {
					width: 54rpx;
					height: 54rpx;
					margin-right: 40rpx;
				}

				.info {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				.signbtn {
					position: absolute;
					right: 0;
					width: 100rpx;
					height: 40rpx;
					background: #ffc000;
					border-radius: 20rpx;
					text-align: center;
					font-size: 22rpx;
					color: #ffffff;
					line-height: 40rpx;
				}
			}
		}
	}

	.btns {
		width: 399rpx;
		height: 88rpx;
		background: #ffc000;
		border-radius: 44px;
		text-align: center;
		line-height: 88rpx;

		font-size: 34rpx;
		font-weight: 400;
		color: #ffffff;
		margin-top: 63rpx;
	}

	.rule_btn {
		font-size: 28rpx;
		font-weight: 400;
		color: #b8b9bf;
		margin-top: 40rpx;
		margin-bottom: 20rpx;

		.icon {
			font-size: 16rpx;
		}
	}
}

.rule_info {
	position: relative;

	// background: #FFFFFF;
	.image {
		width: 629rpx;
		position: relative;
		z-index: 2;
		/deep/.img_box{
			position: relative;
			z-index: 2;
		}
	}

	.content {
		padding-top: 220rpx;
		z-index: 1;
		position: relative;
		top: -220rpx;
		width: 629rpx;
		height: 680rpx;
		background: #ffffff;
		box-shadow: 0px 3rpx 18rpx 0px rgba(211, 217, 253, 0.91);
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		flex-direction: column;

		.title {
			font-size: 36rpx;

			font-weight: bold;
			color: #ff8900;
			line-height: 36px;
		}

		.details {
			width: 580rpx;
			height: 270rpx;
		}
	}

	.rule_sign_btn {
		width: 539rpx;
		height: 101rpx;
		background: #ffbb14;
		border-radius: 50rpx;
		margin: 0 auto;
		text-align: center;
		line-height: 101rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #ffffff;
		position: relative;
		top: -160rpx;
	}
}
</style>
